/*
Modal
*/
:host {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    z-index: var(--an-modal-zindex);
    overflow: hidden;
    display: none;

}

:host([open]) {
    display: block !important;
}

svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
    overflow: hidden;
}

.an-modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.an-modal-backdrop {
    width: 100%;
    height: 100%;
}

.an-modal-wrapper {
    min-width: var(--an-modal-min-width);
    background: var(--an-modal-bg);
    border-radius: var(--an-modal-radius);
    box-shadow: var(--an-box-shadow-default);
    font-size: var(--an-modal-font-size);
    word-wrap: break-word;
    // opacity: 0;
    // transform: scale(0.5);
    // transition: .2s ease-in;
}

// :host([is-opened]) {
//     .an-modal-wrapper {
//         opacity: 1;
//         transform: scale(1);
//     }
// }

.an-modal-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: calc(var(--an-modal-padding) * 2) calc(var(--an-modal-padding) * 2) var(--an-modal-padding) calc(var(--an-modal-padding) * 2);
    font-size: var(--an-modal-title-font-size);
    font-weight: 600;
}

.an-modal-body {
    position: relative;
    padding: calc(var(--an-modal-padding) * 2);
}

.an-modal-message {
    display: flex;
    align-items: center;
}

.an-modal-message-icon {
    display: inline-flex;
    align-items: center;
    margin-right: 10px;
    font-size: 22px;
}

.an-modal-header+.an-modal-body {
    padding-top: var(--an-modal-padding);
}

.an-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: var(--an-modal-padding) calc(var(--an-modal-padding) * 2) calc(var(--an-modal-padding) * 2) calc(var(--an-modal-padding) * 2);
}

.an-modal-footer an-button+an-button {
    margin-left: var(--an-button-gap);
}

.an-modal-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    font-size: 22px;
    color: var(--an-color-text-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.an-modal-close:hover {
    background-color: var(--an-color-hover-bg);
}